<template>
  <div
    class="showPanel flex flex-col gap-y-[20px] h-full animate__animated transitionPanel relative animate__fadeInRight"
  >
    <div class="relative h-full text-[#fff]">
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 py-[50px] pr-[10px]"
      >
        <base-card class="flex-1 overflow-hidden" title="党支部人数">
          <div v-for="(item, index) in topData" class="mb-[10px]">
            <div class="flex items-center justify-between text-[14px] mb-[4px]">
              <span>{{ item.label }}</span>
              <span class="text-[#fff] flex items-center"
                >{{ item.value
                }}<span class="text-[#999] ml-[10px]">/人</span></span
              >
            </div>
            <base-progress
              :percent="item.percent"
              :show-info="false"
            ></base-progress>
          </div>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="党员年龄分布">
          <base-chart :options="middleOption"></base-chart>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="党员学历排行">
          <div v-for="(item, index) in bottomData" class="mb-[10px]">
            <div class="flex items-center justify-between text-[14px] mb-[4px]">
              <span>{{ item.label }}</span>
              <span class="text-[#fff] flex items-center"
                >{{ item.value
                }}<span class="text-[#999] ml-[10px]">/人</span></span
              >
            </div>
            <base-progress
              :percent="item.percent"
              :show-info="false"
            ></base-progress>
          </div>
        </base-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import baseProgress from "@/components/three/component/baseProgress.vue";
import { onMounted, ref } from "vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import { CommonEchartLegend } from "@/utils/index.js";
import { map, max } from "lodash-es";
import {
  getSelectBranchAge,
  getSelectBranchDegree,
  getSelectBranchToll,
  getZHFWdata,
} from "@/api/dataScreen/dataScreen.js";
import { ZHWFDATA } from "@/components/three/component/resultData.js";
const topData = ref([
  {
    label: "管委会党支部",
    value: 0,
  },
  {
    label: "龙源党支部",
    value: 1,
  },
  {
    label: "商都有限公司",
    value: 0,
  },
  {
    label: "恒胜党支部",
    value: 0,
  },
]);
const bottomData = ref([
  {
    label: "NO1.本科/学士及以上",
    value: 30,
  },
  {
    label: "NO2.大专以上",
    value: 20,
  },
]);
const updatePercent = (list) => {
  let maxvalue = max(map(list, "value"));
  list.map((item) => {
    item.percent = Number((item.value / maxvalue) * 100).toFixed(2) * 1;
  });
};
updatePercent(topData.value);
updatePercent(bottomData.value);
const middleOption = ref({
  backgroundColor: "rgba(0,0,0,0)",
  title: [
    {
      text: "18以下",
      top: "45%",
      left: "27%",
      padding: [0, 0, 0, -20],
      textStyle: {
        color: "#3FAA90",
        fontSize: 14,
        fontWeight: "bold",
      },
    },
  ],
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    ...CommonEchartLegend,
    orient: "vertical",
    right: "5%",
    top: "middle",
    formatter: (name) => {
      return `${name} `;
    },
  },
  series: [
    {
      type: "pie",
      radius: ["45%", "65%"],
      center: ["28%", "50%"],
      label: {
        show: false,
      },
      data: [],
    },
  ],
});
const partyMemberAgeDistributionsData = ref([]);
const partyMemberEducationsData = ref([]);
onMounted(() => {
  //党支部人数
  getSelectBranchToll().then((res) => {
    console.log(res.data);
    topData.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.toll,
      };
    });
  });
  //党员年龄分布
  getSelectBranchAge().then((res) => {
    console.log(res.data);
    partyMemberAgeDistributionsData.value = res.data;
    middleOption.value.series[0].data =
      partyMemberAgeDistributionsData.value.map((item) => {
        return {
          name: item.name,
          value: item.toll,
        };
      });
  });

  //党员学历排行
  getSelectBranchDegree().then((res) => {
    console.log(res.data);
    partyMemberEducationsData.value = res.data;
    bottomData.value = partyMemberEducationsData.value.map((item) => {
      return {
        label: `${item.name}`,
        value: item.toll,
      };
    });
  });
});
</script>
<style scoped lang="less">
.transitionPanel {
  transition:
    right 0.7s ease-in-out,
    width 1s ease-in-out,
    opacity 0.7s ease-in-out;
}
.showPanel {
  opacity: 1;
  right: 0;
  //width: 100%;
}
.hidePanel {
  opacity: 0;
  //width: 0%;
  right: -120%;
}
.opt {
  transition:
    right 0.7s ease-in-out,
    left 0.7s ease-in-out;
}
.optToLeft {
  right: 0px;
}
.optToRight {
  right: 360px;
}
:deep(.ant-progress-text) {
  color: #fff;
  font-size: 12px;
}
</style>
